import React, { Component } from 'react'
import { Table, Button , Modal,Form ,Select,Input} from 'antd';
import { inject, observer } from 'mobx-react'
// import axios from 'axios';
const { Option } = Select;
const { Column } = Table;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};
@inject('ybs')
@observer
class GlyTable extends Component {
    constructor() {
        super()
        this.state = {
            data: [],
            account:'',
            password:'',
            userName:'',
            department:'',
            role:'',
        }
    }
    static getDerivedStateFromProps(nextprops) {
        console.log(nextprops);
            const {  data } = nextprops.ybs
            return {
                data: data,
            }
    }
    // async componentDidMount() {
    //     //   return axios({
    //     //       url:'/',
    //     //       method:'post'
    //     //   }).then(res=>{
    //     //       this.data = res.data
    //             // this.props.ybs.setglydata(glydata)
    //             await console.log();
    //              this.setState({
    //                 data:this.props.glytabledata
    //             })
    //     //   })
    // }
    
    render() {
        return (
            <div>
                <Table dataSource={this.state.data}>
                    <Column title="账号" dataIndex="account" key="account" />
                    <Column title="姓名" dataIndex="userName" key="userName" />
                    <Column title="部门" dataIndex="department" key="department" />
                    <Column title="角色" dataIndex="role" key="role" />
                    <Column title="上次登录时间" dataIndex="LastLogin" key="LastLogin" />
                    <Column title="状态" dataIndex="state" key="state" />
                    <Column title="操作"key="action"
                        render={(text, record) => (
                            <span>
                                <Mybtn style={{ marginRight: 16 }} btnData={record} />
                            </span>
                        )}
                    />
                </Table>,
            </div>
        )
    }
}
@inject('ybs')
@observer
class Mybtn extends Component{
    constructor() {
        super()
        this.state = {
            visible: false,
            account:'',
            password:'',
            userName:'',
            department:'',
            role:'',
        }
    }
    selectChange=()=>{
        console.log(1);
        
    }
    modalCancel=()=>{
        this.setState({
            visible:false
        })
    }
    onFinish = values => {
        console.log(values);
    }
    quanxianbianji=()=>{
        this.setState({
            visible:true,
            account:this.props.btnData.account,
            password:this.props.btnData.password,
            userName:this.props.btnData.userName,
            department:this.props.btnData.department,
            role:this.props.btnData.role,
        })
    }
    bianjibtn=()=>{
        this.setState({
            visible:false
        })
    }
    //删除管理员
    gludelete=()=>{
        let obj = this.props.btnData
        this.props.ybs.deleteGlyData(obj)
        
        
        
    }
    accountChange=(e)=>{
        this.setState({
            account:e.target.value
        })
    }
    passwordChange=(e)=>{
        this.setState({
            password:e.target.value
        })
    }
    nameChange=(e)=>{
        this.setState({
            userName:e.target.value
        })
    }
    bumenChange=(e)=>{
        this.setState({
            department:e
        })
    }
    jueseChange=(e)=>{
        this.setState({
            role:e
        })
    }
    render(){
        // console.log(this.props.btnData);
        return(
            <div>
                <Button onClick={this.quanxianbianji}>编辑</Button>
                <Button onClick={this.gludelete}>删除</Button>
                <Modal
                    title="编辑"
                    visible={this.state.visible}
                    // onOk={this.handleOk}
                    onCancel={this.modalCancel}
                    footer={[
                        <Button type='primary' key="queding" onClick={this.bianjibtn}>
                            确定
                        </Button>,
                        <Button key="back" onClick={this.modalCancel}>
                            取消
                        </Button>
                    ]}
                >
                    <Form {...layout}  onFinish={this.onFinish} >
                    <Form.Item  label="账号" >
                            <Input value={this.state.account} onChange={this.accountChange} />
                        </Form.Item>
                        <Form.Item  label="密码">
                            <Input value={this.state.password} onChange={this.passwordChange}  />
                        </Form.Item>
                        <Form.Item label="姓名">
                            <Input value={this.state.userName} onChange={this.nameChange} />
                        </Form.Item>
                        <Form.Item  label="所属编辑部" >
                            <Select value={this.state.department} style={{ width: 120 }} onChange={this.bumenChange}>
                                <Option value="新房编辑部">新房编辑部</Option>
                                <Option value="运营部">运营部</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item  label="所属角色">
                            <Select value={this.state.role} style={{ width: 120 }} onChange={this.jueseChange}>
                                <Option value="超级管理员">超级管理员</Option>
                                <Option value="管理员">管理员</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default GlyTable